<div class="home">
  <app-wy-carousel #wyCarousel [activceIndex]="carouselActiveIndex"
    (changeSlide) = "onChangeSilde($event)">
    <nz-carousel nzAutoPlay
     nzEffect="fade"
     [nzDotRender]="wyCarousel.dotRef"
     (nzBeforeChange)="onBeforeChange($event)">
      <div class="carousel-item" nz-carousel-content *ngFor="let item of banners">
        <a [href]="item.url">
          <img [src]="item.imageUrl" />
        </a>
      </div>
    </nz-carousel>
  </app-wy-carousel>
  <div class="main">
    <div class="wrap">
      <div class="left">
        <div class="sec">
          <div class="up">
            <div class="navs">
              <h2>
                <i></i>
                <a>热门标签</a>
              </h2>
              <nav>
                <a *ngFor="let item of hotTags" >{{item.name}}</a>
              </nav>
            </div>
            <a>
              更多
              <i nz-icon nzType="arrow-right" nzTheme="outline"></i>
            </a>
          </div>
          <div class="down">
            <div class="down-wrap" >
              <app-single-sheet class="sheet-item" *ngFor="let song of songSheets" [songSheet]="song"
                (playNow)="playSheet($event)"></app-single-sheet>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <app-member-card></app-member-card>
        <div class="settled-singer">
          <div class="tit"><b>入驻歌手</b></div>
          <div class="list">
            <div class="card" *ngFor="let singer of singeres">
              <div class="pic">
                <img [src]="singer.picUrl" [alt]="singer.name">
              </div>
              <div class="txt">
                <b class="ellipsis">{{singer.name}}</b>
                <span>专辑数: {{singer.albumSize}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
